import React, { useEffect, useState, useRef } from 'react'
import { connect } from'react-redux'
import MusicList from '../../music-list/music-list'

import './playing-list.scss'

const PLayingList = (props) => {

  useEffect(() => {
  }, [props])

  const {
    show,
    isFrist,
    close,
    playIngList = {
      list: [], playId: 1
    },
    detail
  } = props
  const { list, playId } = playIngList
  return (
    <div
      style={{ display: `${ isFrist ? 'none' : 'blcok' }` }}
      className={ `${ show ? 'showToBottom' : 'noneTotop' } ${ detail ? 'bg-black' : 'bg-white' } playing-list` }
    >
      <div className='playing-list-content'>
        <MusicList data={ list } />
      </div>
      <p
        className='close-btn'
        onClick={ close }
      >
        关闭
      </p>
    </div>
  )

}

export default connect(
  (store) => {
    return store.common
  },
  () => {

  }
)(PLayingList)